<template>
  <!-- 当事人关系类型 -->
  <a-card :bordered="false">
    <div class="table-page-search-wrapper">
      <a-form layout="inline">
        <a-row :gutter="48">
          <a-col :md="8" :sm="24">
            <a-form-item label="从某角色类型">
              <PaginationSelect @input="FromRole" ref="fromRole" placeholder="请选择从某角色类型">
              </PaginationSelect>
            </a-form-item>
          </a-col>
          <a-col :md="8" :sm="24">
            <a-form-item label="到某角色类型">
              <PaginationSelect @input="toRole" ref="toRole" placeholder="请选择到某角色类型">
              </PaginationSelect>
            </a-form-item>
          </a-col>
          <a-col :md="8" :sm="24">
            <a-form-item label="当事人关系类型名称">
              <a-input v-model="pagination.name" style="width: 100%" placeholder="请输入当事人关系类型名称"></a-input>
            </a-form-item>
          </a-col>
          <a-col :md="8" :sm="24">
            <a-form-item label="当事人关系类型描述信息">
              <a-input v-model="pagination.description" placeholder="请输入描述信息"></a-input>
            </a-form-item>
          </a-col>
          <a-col :md="8" :sm="24" style="margin-bottom: 20px;">
            <a-button type="primary" @click="onSearch">查询</a-button>
            <a-button style="margin-left: 8px" @click="onReset">重置</a-button>
          </a-col>
        </a-row>
      </a-form>
    </div>
    <div class="filter-container">
      <template>
        <div>
          <a-button type="primary" @click="add" icon="plus" v-checkBtn="'parties:relation:type:add'">
            新增关系类型
          </a-button>
        </div>
      </template>
    </div>
    <a-back-top />
    <div>
      <template>
        <a-table
          :columns="columns"
          :data-source="dataSource"
          bordered
          :loading="loading"
          :rowKey="(record) => { return record.partyRelationshipTypeId }"
          :scroll="{ x: true }"
          :pagination="pagination">
          <span slot="action" slot-scope="text, record">
            <!-- <a href="javascript:;" @click="onEdit(record)">编辑</a> -->
          </span>
        </a-table>
      </template>
    </div>
    <saveModal ref="saveModal" v-if="dialog.save" @success="tableData" @close="dialog.save = false"></saveModal>
  </a-card>
</template>

<script>

import { getPartyTypes, getRoleTypes } from '@/api/base'
import saveModal from './save'
import PaginationSelect from './PaginationSelect'
import { Modal } from 'ant-design-vue'

export default {
    components: { saveModal, PaginationSelect },
    data () {
        return {
            // 高级搜索 展开/关闭
            advanced: false,

            columns: [
                {
                    title: '从某角色类型',
                    dataIndex: 'roleTypeNameFrom',
                    key: 'roleTypeNameFrom',
                    align: 'center',
                    minWidth: 200
                },
                {
                    title: '到某角色类型',
                    dataIndex: 'roleTypeNameTo',
                    key: 'roleTypeNameTo',
                    align: 'center',
                    maxWidth: 200
                },
                {
                    title: '当事人关系类型名称',
                    dataIndex: 'name',
                    key: 'name',
                    align: 'center',
                    maxWidth: 200
                },
                {
                    title: '描述信息',
                    dataIndex: 'description',
                    key: 'description',
                    align: 'center',
                    maxWidth: 200
                }
                // {
                //     title: '操作',
                //     width: '150px',
                //     dataIndex: 'action',
                //     align: 'center',
                //     fixed: 'right',
                //     width: 150,
                //     scopedSlots: { customRender: 'action' }
                // }
            ],
            dataSource: [],
            dialog: {
                save: false
            },
            loading: false,
            pagination: {
                // 分页配置
                pageSize: 6, // 每页显示的条数
                // showSizeChanger: true, // 是否可以改变每页显示的条数
                // pageSizeOptions: ['10', '20', '30', '40'], // 可选的每页显示条数
                showQuickJumper: true, // 是否可以快速跳转到指定页
                showTotal: total => `共 ${total} 条`, // 显示总条数和当前数据范围
                current: 1, // 当前页数
                total: 10, // 总条数
                name: '',
                fromRoleTypeId: undefined,
                toRoleTypeId: undefined,
                description: '',
                onChange: this.handlePageChange // 页码改变时的回调函数
            },

            // 角色类型下拉
            fromData: [],
            fromQuery: {
                current: 1,
                pageSize: 10,
                description: '',
                name: ''
            }

        }
    },
    // created() {

    // },
    mounted () {
        this.tableData()
        // this.getSelect()
    },
    methods: {
        FromRole (val) {
            this.pagination.fromRoleTypeId = val
        },
        toRole (val) {
            this.pagination.toRoleTypeId = val
        },

        toggleAdvanced () {
            this.advanced = !this.advanced
        },
        // getSelect() {
        //     getRoleTypes(this.fromQuery).then((res) => {
        //         if (res.code == 200) {
        //             let data = res.data.datas
        //             this.fromData = data
        //             // if (data.length === 0) {
        //             //     return
        //             // } else {
        //             //     this.fromData = this.fromData.concat(res.data.data)
        //             // }
        //         }
        //     })
        // },
        // 搜索
        onSearch () {
            this.pagination.current = 1
            this.pagination.pageSize = 6
            this.tableData()
        },
        // 重置
        onReset () {
            this.pagination = {
                // 分页配置
                pageSize: 6, // 每页显示的条数
                showQuickJumper: true, // 是否可以快速跳转到指定页
                showTotal: total => `共 ${total} 条`, // 显示总条数和当前数据范围
                current: 1, // 当前页数
                total: 10, // 总条数
                name: '',
                fromRoleTypeId: undefined,
                toRoleTypeId: undefined,
                description: '',
                onChange: this.handlePageChange // 页码改变时的回调函数
            }
            this.$refs.fromRole.onReset()
            this.$refs.toRole.onReset()
            this.tableData()
        },
        // 访问资源类型
        onResourceType (e) {
            this.pagination.resourceType = e
        },
        handlePageChange (page, pageSize) {
            this.pagination.current = page
            this.tableData()
        },
        // 新增
        add () {
            this.dialog.save = true
            this.$nextTick(() => {
                this.$refs.saveModal.open()
            })
        },
        // 编辑
        onEdit (row) {
            this.dialog.save = true
            this.$nextTick(() => {
                this.$refs.saveModal.open('edit').setData(row)
            })
        },
        onClosed () {
            this.dialog.save = false
        },
        tableData () {
            this.loading = true
            this.dialog.save = false
            const par = {
                ...this.pagination
            }
            if (par.fromRoleTypeId == undefined) par.fromRoleTypeId = ''
            if (par.toRoleTypeId == undefined) par.toRoleTypeId = ''
            console.log(this.pagination)
            getPartyTypes(par).then(res => {
                if (res.code == 200) {
                    this.dataSource = res.data.datas
                    this.pagination.total = res.data.total
                }
                this.loading = false
            })
        },

        onDel (row) {
            const _this = this
            Modal.confirm({
                title: '删除信息',
                content: '确定要删除吗？',
                onOk: () => {
                    deleteTenants(row.tenantId).then(res => {
                        if (res.code == 200) {
                            _this.tableData()
                            _this.$message.success('删除成功')
                        } else {
                            _this.$message.error(res.message)
                        }
                    })
                }
            })
        }
    }
}
</script>

<style scoped lang="less" >
.send-display-container {
    width: 100%;
    background-color: #ffffff;
    padding: 24px;
}

.filter-container {
    display: flex;
    align-items: center;
    padding-bottom: 24px;
    justify-content: left;

    .label {
        padding-right: 20px;

        white-space: nowrap;
    }

    .input-container {
        width: 300px;
        margin-right: 20px
    }

    .btn {
        margin-right: 20px;
    }
}

// /deep/ .ant-modal {
//     min-width: 700px;
//     margin-left: 30%;
// }
</style>
